
@mixin cle{
            content: "";
            display: block;
            clear: both;
            height: 0;
            font-size: 0;
            overflow: hidden;
        }

.nav-index{
    >div{
        .nav-search{
            p{
                input{
                    width: 488px;
                }
            }
            ul{
                position: relative;
                top: 0;
                left: 0;
                display: block!important;
                width: 540px;
                height: 35px;
                padding: 0;
                margin-bottom: 40px;
                background: none;
                box-shadow: none;
                overflow: hidden;
                li{
                    float: left;
                    height: 35px;
                    padding: 0;
                    margin-right: 20px;
                    line-height: 35px;
                    a{
                      color: #808080;
                    }
                    
                }
                li:hover a{
                    color: #f7b200;
                }
            }
        }
    }
}

//banner区域
.banner{
    position: relative;
    width: 1080px;
    margin: 10px auto 0;
    background: #fff;
    .banner-slider{
        position: relative;
        >ul{
        height: 360px;
        overflow: hidden;
            li{
                position: absolute;
                top: 0;
                left: 0;
                a{
                    img{
                        width: 1080px;
                        height: 360px;
                        border: 0;
                    }
                }
            }
        }
        ol{
            position: absolute;
            bottom: 20px;
            right: 0;
            width: 880px;
            text-align: center;
            li{
                position: relative;
                display: inline-block;
                height: 10px;
                width: 10px;
                margin: 0 6px;
                border: 2px solid #523669;
                border-radius: 50%;
                cursor: pointer;
            }
            .active{
                background: #f7b200;
                border-color: #f7b200;
            }
        }
        span{
            position: absolute;
            top: 50%;
            left: 220px;
            width: 48px;
            height: 48px;
            margin-top: -24px;
            border-radius: 2px;
            background: url(../images/index/slider-left.png) no-repeat;
            cursor: pointer;
            display: none;
        }
        .slider-right{
            left: inherit;
            right: 20px;
            background: url(../images/index/slider-right.png) no-repeat;
        }
    }
    .banner-slider:hover span{
        display: block;
    }
    
   
}



.article{
    width: 1080px;
    margin: 0 auto;
    a{
        display: block;
        line-height: 56px;
        font-size: 16px;
        color: #333;
        background: #fff;
        img{
            width: 100px;
            margin: 0 48px;
            vertical-align: middle;
        }
        span{
            display: inline-block;
            height: 21px;
            line-height: 21px;
            padding-left: 20px;
            border-left: 1px solid #ccc;
            vertical-align: middle;
        }
        i{
            float: right;
            margin-right: 20px;
        }
    }
}

//模块区域

.category{
    width: 1080px;
    margin: 0 auto;
    .clearfix:after{
        @include cle;
    }
    >div{
        margin-top: 40px;
        .title{
            position: relative;
            margin-bottom: 20px;
            p{
                line-height: 24px;
                font-size: 24px;
                color: #333;
            }
            a{
                position: absolute;
                bottom: 0;
                right: 0;
                color: #333;
                font-size: 16px;
            }
        }
    }
}
.module-1{
    ul{
        width: 1095px;
        li{
            float: left;
            margin-right: 15px;
            a{
                display: block;
                width: 350px;
                height: 220px;
                
            }
            a:hover{
                box-shadow: 0 1px 10px 4px rgba(0,0,0,.05);
            }
        }
    }
}
.module-2{
    
    ul{
       
        width: 100%;
        height: 280px;
        background: #fff;
        overflow: hidden;
        li{
            position: relative;
            float: left;
            width: 82px;
            height: 280px;
            background: #fff;
            overflow: hidden;
            margin-left: 10px;
            a{
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                i{
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 620px;
                    height: 280px;
                    z-index: 11;
                    background: rgba(0,0,0,.3);
                    transition: background 0.5s ease-in-out 0s;
                }
                
                img{
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        li:nth-child(1){
            width: 620px;
            margin-left: 0;
            a{
                i{
                    background: rgba(0,0,0,.0);
                }
            }
        }
        
    }
}
.module-3{
    max-height: 627px;
    ul{
    width: 1095px;
        li{
            float: left;
            margin: 0 15px 15px 0;
            a{
                display: block;
                width: 204px;
                text-align: center;
                height: 284px;
                background: #fff;
                transition: box-shadow 0.5s ease-in-out 0s;
                i{
                    display: inline-block;
                    width: 204px;
                    height: 204px;
                    overflow: hidden;
                    img{
                        width: 204px;
                        height: 204px;
                    }
                }
                dl{
                    height: 60px;
                    margin-top: 20px;
                    dt{
                        color: #333;
                        font-size: 16px;
                        text-align: center;
                    }
                    dd{
                        margin-top: 5px;
                        color: #ff3333;
                        font-size: 16px;
                        text-align: center;
                    }
                }
            }
            a:hover{
                box-shadow:  0 1px 10px 4px rgba(0,0,0,.05);
            }
        }
        .brand{
            a{
                width: 423px;
                i{
                    width: 423px;
                    img{
                        position: relative;
                        
                        width: 100%;
                    }
                }           
                span{
                    display: block;
                    margin-top: 24px;
                    font-size: 20px;
                    color: #333;
                }
            }
        }
    }
}

